<template>
	<div class="feed-item flex items-center">
		<account-avatar :data="data.avatar" :width="34" :userId="data.userId" />
		<div class="ml-1 flex-1 w-1">
			<div class="flex justify-between items-center text-base app-font-bold">
				<div>{{ data.userNick || data.userName }}</div>
				<div class="text-sm text-t-4">{{ time }}</div>
			</div>
			<div class="flex justify-between items-center">
				<account-titles :vip="data.vip" :star="data.star" :medal="data.medal" />
				<feed-item-hide v-if="isMe" :data="data" />
				<account-tags
					v-else-if="!hideTags"
					:data="memberStore.userTags(data.userId)"></account-tags>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import FeedItemHide from './feed-item-hide.vue'
import { AccountAvatar, AccountTitles, AccountTags } from '@/components/account/'
import { computed, PropType } from 'vue'
import { FeedType } from '@/types'
import { getRelativeDateArr, t } from '@/utils'
import { useMemberStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType>,
		required: true
	},
	isMe: {
		type: Boolean,
		default: false
	},
	hideTags: {
		type: Boolean,
		default: false
	}
})

const memberStore = useMemberStore()

const time = computed(() => {
	if (props.data.isLive && !props.data.outcome) {
		return 'LIVE'
	} else if (props.data.selections && props.data.selections.length) {
		const startEventDate = props.data.selections
			.slice()
			.sort(
				(a, b) => new Date(a.startEventDate).valueOf() - new Date(b.startEventDate).valueOf()
			)[0].startEventDate
		const { d, h, m, sign } = getRelativeDateArr(startEventDate)
		return (d ? `${d}d` : h ? `${h}h` : `${m}m`) + (sign ? ' ' + t('match.ago') : '')
	}
	return ''
})
</script>
